<template>
  <div class="searchpassword">
    <div class="search">
      <div class="title">
        <span>修改邮箱</span>
        <router-link to="/home/set/userset">返回个人设置</router-link>
      </div>
      <div class="form">
        <div>
          <p>请输入新邮箱地址</p>
          <input v-model="newEmail" type="text" />
        </div>
        <div>
          <p>请输入密码</p>
          <input v-model="newPassword" type="password" />
        </div>
        <div>
          <input v-model="Code" class="code" type="text" />
          <span @click="mySend">{{ getCode }}</span>
        </div>
        <div>
          <button @click="mySave">更新邮箱</button>
        </div>
      </div>
    </div>

    <!-- 动画 -->
    <transition
      :duration="{ enter: 1000, leave: 550 }"
      enter-to-class="animate__animated animate__fadeInUp"
      enter-active-class="animate__animated animate__fadeInUp"
      leave-to-class="animate__animated animate__fadeOutDown"
      leave-active-class="animate__animated animate__fadeOutDown"
    >
      <div v-if="isTip" class="searchTip">
        <div class="tip">
          <p>
            【吾志】验证码<span>{{ myCode }}</span
            >，您正在通过验证码修改邮箱，有效期10分钟，如果不是您本人操作，那么您的账号密码很可能已泄露，<button>
              点击紧急锁定
            </button>
          </p>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "searchPassword",
  data() {
    return {
      isTip: false,
      getCode: "获取验证码",
      num: 60,
      num2: 0,
      timer: null,
      t: null,
      p: null,
      newEmail: "",
      newPassword: "",
      Code: "",
      myCode:"",
    };
  },
  methods: {
    myRandom() {
      return Math.floor(Math.random() * (100 - 10) + 10);
    },
    mySend() {
      this.getCode = this.num;
      this.timer = setInterval(() => {
        this.num -= 1;
        this.getCode = this.num;
        if (this.num < 0) {
          this.num = 60;
          this.getCode = "重新发送验证码";
          clearInterval(this.timer);
        }
      }, 1000);
      this.t = setTimeout(() => {
        this.isTip = true;
        let v1 = this.myRandom().toString();
        let v2 = this.myRandom().toString();
        // console.log(v1,v2);
        this.myCode = v1+v2;
        this.p = setInterval(() => {
          this.num2 += 1;
          if (this.num2 > 10) {
            clearTimeout(this.t);
            clearInterval(this.p);
            this.isTip = false;
            this.num2 = 0;
          }
        }, 1000);
      }, 5000);

      // console.log(this.myRandom());
    },
    mySave() {
      if (this.newEmail.length == 0 || this.newPassword.length == 0) {
        alert("邮箱或密码不能为空");
        return false;
      }
      if (this.Code.length == 0) {
        alert("请输入验证码");
        return false;
      }
      let userEmail = JSON.parse(localStorage.getItem("userMsg"));
      // console.log(userEmail);
      if (this.newEmail == userEmail.email) {
        alert("新邮箱与旧邮箱不能重复");
        return false;
      }
      if(this.newPassword != userEmail.password){
        alert('密码有误,请重新输入')
        return false;
      }
      if(this.Code == this.myCode){
        let obj = {email:this.newEmail,password:this.newPassword}
        alert("更新成功")
        localStorage.setItem("userMsg",JSON.stringify(obj))
        this.$store.state.userEmail = this.newEmail;
        this.$store.state.userPassword = this.newPassword;
        this.$router.push({path:"/home/set/userset"})
      }
    },
  },
};
</script>

<style lang="less" scoped>
.searchpassword {
  width: 100%;
  .search {
    width: 100%;
    .title {
      font-size: 16px;
      margin: 15px 0 25px 0;
      span {
        margin-right: 15px;
      }
      a {
        color: #808080;
      }
    }
    .form {
      div {
        margin-bottom: 15px;
        span {
          margin-left: 10px;
          font-size: 16px;
          cursor: pointer;
          background-color: #ccc;
          border-radius: 5px;
          padding: 5px 5px;
          color: #03509e;
          font-weight: bold;
        }
        .code {
          width: 80px;
        }
        p {
          font-size: 16px;
        }
        input {
          border: 1px solid #ccc;
          border-radius: 5px;
          width: 220px;
          height: 35px;
          margin: 15px 0 5px 0;
          padding-left: 5px;
          box-sizing: border-box;
        }
        button {
          margin-top: 10px;
          font-size: 16px;
          border: 1px solid #ccc;
          border-radius: 5px;
          padding: 5px 20px;
          color: #808080;
          cursor: pointer;
          &:active {
            color: #000;
          }
        }
      }
    }
  }
  .searchTip {
    width: 250px;
    height: 220px;
    background-color: #e3b671;
    position: fixed;
    bottom: 0;
    right: 0;
    border-radius: 10px;
    .tip {
      padding: 20px;
      box-sizing: border-box;
      p {
        line-height: 22px;
        font-size: 16px;
        span {
          color: blue;
          text-decoration: underline;
          font-size: 18px;
          font-weight: bold;
        }
        button {
          background-color: transparent;
          cursor: pointer;
          font-size: 16px;
          color: red;
        }
      }
    }
  }
}
</style>